<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* IFC特点: 
         swiper-pagination 变成IFC  => 水平对齐text-align
         */
        .swiper-pagination {
            width: 600px;
            height: 600px;
            background-color: rosybrown;
            text-align: center;
        }

        .pagination {
            /* float:left; */
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: rebeccapurple;
            border-radius: 50%;
        }

        /* 
         display: inline-block;
         1.text-align 水平方向 
         + left
         + center
         + right

         2.vertical-align:垂直方向
         + top
         + bottom
         + middle
         + px / %
         ...
        
        3.font-size      字体大小
          line-height    行高
          vertical-align 基线(x)

          ?  vertical-align:middle/top/bottom    display:block;
         */
    </style>
</head>

<body>
    <!-- 需求: 小圆点 水平居中 -->
    <div class="swiper-pagination">
        <span class="pagination"></span>
        <span class="pagination"></span>
        <span class="pagination"></span>
        <span class="pagination"></span>
        <span class="pagination"></span>
        <span class="pagination"></span>
        <span class="pagination"></span>
    </div>
</body>

</html>